@extends('layouts.appManager')

@section('title')商城管理@endsection

@section('style')
    <style>
        .el-tabs__new-tab{
            background-color: #007bff;
        }
    </style>
@endsection

@section('content')
    <div class="container py-5">

{{--        <input type="hidden" id="serverId" value="{{$server->id}}">--}}

        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card panel mb-4">
                    <div class="card-header">出售中商品</div>

                    <div class="card-body ">

                        <el-tabs v-model="curCatIdTab" editable @edit="handleTabsEdit">
                            <el-tab-pane label="全部" :name="'tab0'"></el-tab-pane>
                            <el-tab-pane v-for="v in cats" :key="v.id" :label="v.title" :name="'tab'+v.id"></el-tab-pane>
                        </el-tabs>

                        <div v-for="(v,k) in sellList" class="media my-4" v-if="curCatId===0 || curCatId==v.cat_id">
{{--                        <div v-for="(v,k) in sellList" class="media my-4">--}}
                            <span class="align-self-start mr-2 itemIcon">
                                <img  v-if="v.item" :src=" v.item.iconPath ">
                                <img  v-else src="/icon/inv_misc_questionmark.png">
                            </span>
                            <div class="media-body">
                                <div v-if="v.item">
                                <h6 class="mt-1">@{{ v.item.name }}</h6>
                                <span class="badge badge-dark">ID: @{{ v.item_id }}</span>
                                <span class="badge badge-info">物品等级: @{{ v.item.ItemLevel }}</span>
                                <span class="badge badge-danger">装备等级: @{{ v.item.RequiredLevel }}</span>
                                </div>
                                <h1 v-else class="mt-1" style="color:red">无效商品请删除</h1>


                                <div class="mt-2">
                                    <div class="input-group input-group-sm mt-2">

                                        <select v-model="v.cat_id" class="custom-select" @change="update(v)">
                                            <option :value="0" :selected="v.cat_id===0">未分类</option>
                                            <option v-for="cat in cats" :key="cat.id" :value="cat.id" :selected="v.cat_id===cat.id">@{{ cat.title }}</option>
                                        </select>

                                        <div class="input-group-append">
                                            <span class="input-group-text" >序号</span>
                                        </div>
                                        <input type="number" min="0" max="100" step="1" onkeyup="num(this)" class="form-control" v-model="v.order" >

<!--                                        <div class="input-group-append">
                                            <span class="input-group-text" >限量</span>
                                        </div>
                                        <input type="number" min="0" max="100" step="1" onkeyup="num(this)" class="form-control" v-model="v.count" placeholder="请输入数量">-->

                                        <input type="number" min="0" max="10000" step="1" onkeyup="num(this)" class="form-control" v-model="v.price"  style="text-align: right">
                                        <div class="input-group-append">
                                            <span class="input-group-text" >积分/个</span>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button" @click="update(v)"> 更新 </button>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-sm btn-warning" type="button" @click="remove(v.id)"> 下架 </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card panel mb-4">
                    <div class="card-header">添加商品</div>

                    <div class="card-body ">

                        <div class="input-group mb-3">
                            <input type="text" class="form-control" v-model="searchKey" >
                            <div class="input-group-append">
                                <button class="btn btn-secondary" type="button" @click="search"> 查询 </button>
                            </div>
                        </div>

                        <div>
                            <div v-for="(v,k) in searchList" class="media my-4">
                                <span class="align-self-start mr-2 itemIcon">
                                    <img :src=" v.iconPath ">
                                </span>
                                <div class="media-body">
                                    <h6 class="mt-1">
                                        @{{ v.name }} </h6>

                                    <span class="badge badge-dark">ID: @{{ v.entry }}</span>
                                    <span class="badge badge-info">物品等级: @{{ v.ItemLevel }}</span>
                                    <span class="badge badge-danger">装备等级: @{{ v.RequiredLevel }}</span>


                                    <div class="input-group input-group-sm mt-2">
                                        <div class="input-group-append">
                                            <span class="input-group-text" >序号</span>
                                        </div>
                                        <input type="number" min="0" max="100" step="1" onkeyup="num(this)" class="form-control" v-model="v.order">

<!--                                        <div class="input-group-append">
                                            <span class="input-group-text" >限量</span>
                                        </div>
                                        <input type="number" min="0" max="100" step="1" onkeyup="num(this)" class="form-control" v-model="v.count" placeholder="请输入数量">-->

                                        <input type="number" min="0" max="10000" step="1" onkeyup="num(this)" class="form-control" v-model="v.price" style="text-align: right">
                                        <div class="input-group-append">
                                            <span class="input-group-text" >积分/个</span>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-warning" type="button" @click="add(v)"> 上架 </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <script>
        let serverId='{{$server->id}}';

        function num(obj){
            obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
            obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
            obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }

        var app = new Vue({
            el: '#app',
            data: {
                serverId:parseInt(serverId),
                searchKey:'血色十字军',
                searchList:[],
                sellList:[],
                cats:[],
                curCatId:0,
                curCatIdTab:'tab0',
            },
            mounted() {
                // this.serverId=$('#serverId').val();
                // console.log(this.serverId);
                this.goodsCatList();
                this.getSell();
            },
            watch:{
                curCatIdTab(){
                    this.curCatId= parseInt(this.curCatIdTab.substr(3));
                }
            },
            methods: {
                getSell:function(){
                    var t=this;
                    post("/manager/server/"+t.serverId+"/goodsList",{},res=>{
                        t.sellList=res.data;
                    },t);
                },
                search: function () {
                    var t=this;
                    post("/manager/server/"+t.serverId+"/goodsSearch",{key : t.searchKey},res=>{
                        t.searchList=res.data;
                    },t);
                },
                add:function (item) {
                    let t=this;
                    let price=parseInt(item.price)
                    if(price<0){
                        t.$message.error('价格必须是大于对于0的整数');
                        return
                    }
                    item.cat_id=t.curCatId;
                    post("/manager/server/"+t.serverId+"/goodsAdd",item,res=>{
                        t.sellList.push(res.data);
                        t.$message.success('上架成功');
                    },t);
                },
                update:function (item) {
                    var t=this;
                    let price=parseInt(item.price)
                    if(price<0){
                        t.$message.error('价格必须是大于对于0的整数');
                        return
                    }
                    post("/manager/server/"+t.serverId+"/goodsUpdate",item,res=>{
                        t.$message.success('修改成功');
                    },t);
                },
                remove:function (id) {
                    var t=this;
                    post("/manager/server/"+t.serverId+"/goodsRemove",{id :id},res=>{
                        t.$message.success('下架成功');
                        for (var i=0; i<t.sellList.length;i++){
                            if (t.sellList[i].id === id) {
                                t.sellList.splice(i, 1);
                                break;
                            }
                        }
                    },t);
                },
                goodsCatList(){
                    var t=this;
                    post("/manager/server/"+t.serverId+"/goodsCatList",{},res=>{
                        t.cats=res.data;
                        console.log(res);
                    },t);
                },
                // goodsCatUpdate(){
                //     var t=this;
                //     post("/manager/server/"+t.serverId+"/goodsCatUpdate",{id :id},res=>{
                //     },t);
                // },
                goodsCatAdd(){
                    let title = prompt('请输入分类名称', '');
                    if(title !== null && title !== '') {
                        var t=this;
                        post("/manager/server/"+t.serverId+"/goodsCatAdd",{title :title},res=>{
                            t.cats.push(res.data);
                            console.log(res.data);
                        },t);
                    }

                },
                goodsCatDel(id){
                    var t=this;
                    post("/manager/server/"+t.serverId+"/goodsCatDel",{id :id},res=>{
                        for (let i=0;i<this.cats.length;i++){
                            let item=t.cats[i];
                            if (item.id===id){
                                t.cats.splice(i,1)
                                t.curCatIdTab='tab0'
                                return
                            }
                        }
                    },t);
                },
                handleTabsEdit(targetName, action){
                    if (action === 'add') {
                        this.goodsCatAdd()
                    }else if (action === 'remove') {
                        if(targetName==='tab0'){
                            this.$message.error('默认分类无法删除');
                            return
                        }
                        let cat_id=parseInt(targetName.substr(3))
                        for (let i=0;i<this.sellList.length;i++){
                            let item=this.sellList[i];
                            if (item.cat_id===cat_id){
                                this.$message.error('包含商品的分类无法删除');
                                return
                            }
                        }
                        this.goodsCatDel(cat_id)
                        console.log(targetName)
                    }
                }
            }
        })
    </script>
@endsection
